const foldWrapper = {
  inserted(el, binding) {
    const style = window.getComputedStyle(el)
    const { height, lineHeight, paddingBottom } = style
    const maxHeight = Number(height.substring(0, height.length - 2))
    const lineH = Number(lineHeight.substring(0, lineHeight.length - 2))
    const rootPaddingBottom = Number(paddingBottom.substring(0, paddingBottom.length - 2))
    const params = binding.value
    const options = {
      fold: params?.fold || false,
      limitLines: params?.limitLines || 1,
      foldText: params?.foldText || '展开',
      unfoldText: params?.unfoldText || '收起',
      offsetY: params?.offsetY || 0,
      background: params?.background || '',
    }
    // 判断是否超出限定行数
    let { limitLines, offsetY, background } = options
    const limitVal = Number(limitLines)

    limitLines = isNaN(limitVal) || limitVal || 1
    const minHeight = limitLines * lineH
    const foldable = minHeight < maxHeight
    if (foldable) {
      const foldEl = document.createElement('div')
      const btnEl = document.createElement('div')
      const arrowEl = document.createElement('i')
      const labelEl = document.createElement('span')

      btnEl.appendChild(arrowEl)
      btnEl.appendChild(labelEl)
      foldEl.appendChild(btnEl)
      el.appendChild(foldEl)

      foldEl.className = 'vd-fw-box'
      btnEl.className = 'vd-fw-btn'
      arrowEl.className = 'el-icon-arrow-up vd-fw-arrow'
      el.className = 'vd-fw-el ' + el.className
      // const maxTextLen = Math.max(options.foldText.length, options.unfoldText.length)
      // const foldBtnWidth = (maxTextLen + 1) * 14 + 8 // 宽度 字数+icon * 字号 + 间距3+ 间距5

      // if (rootPaddingRight < foldBtnWidth) {
      //   el.style.paddingRight = foldBtnWidth + 'px'
      // }
      el.style.paddingBottom = rootPaddingBottom + lineH + 'px'

      if (offsetY) {
        foldEl.style.transform = `translateY(${offsetY}px)`
      }
      if (background) {
        btnEl.style.background = background
        btnEl.style.boxShadow = `-12px 4px 4px 0px ${background}`
      }

      let isFold = options.fold || false
      _syncFoldDisplay(isFold)
      btnEl.addEventListener('click', () => {
        isFold = !isFold
        _syncFoldDisplay(isFold)
      })

      function _syncFoldDisplay(fold) {
        if (fold) {
          el.style.maxHeight = minHeight + 'px'
          labelEl.innerText = options.foldText
          btnEl.className += ' fold'
        } else {
          el.style.maxHeight = ''
          labelEl.innerText = options.unfoldText
          btnEl.className = 'vd-fw-btn'
        }
      }
    }
  },
}

document.styleSheets[0].insertRule('.vd-fw-el {position:relative;overflow:hidden;}', 0)
document.styleSheets[0].insertRule('.vd-fw-box {position:absolute; bottom:0px;right:0;}', 0)
document.styleSheets[0].insertRule(
  '.vd-fw-btn {cursor:pointer;color:#2b78f1;padding-right:5px; background:rgba(255,255,255,0.95);box-shadow:-12px 4px 4px 0px rgba(255,255,255,0.8)}',
  0
)
document.styleSheets[0].insertRule('.vd-fw-btn.fold {top:0; bottom:initial}', 0)
document.styleSheets[0].insertRule('.vd-fw-btn:hover {font-weight:bold}', 0)
document.styleSheets[0].insertRule('.vd-fw-arrow {margin-right:3px;transition:0.3s 0.5s;}', 0)
document.styleSheets[0].insertRule('.vd-fw-btn.fold .vd-fw-arrow {transform:rotate(180deg)}', 0)

export default foldWrapper
